<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p id="p01">msg:{{msg}}</p>
        <p id="p02">age:{{age}}</p>
        <input type="button" value="修改msg" @click="changeMsg">
        <input type="button" value="修改age" @click="changeAge">
        <hr/>
    </div>
</body>
</html>
<script src="./js/vue.global.js"></script>
<script>

     let app = Vue.createApp({
        data(){
            return {
                msg:"hi",
                age:12                
            }
        },
        mounted(){
            // console.log("mounted");//当模板渲染完毕后，调用mounted
        },
        // 这个钩子函数是在mounted之前执行的。
        renderTracked(event){
            // console.log("renderTracked.event.key",event.key);//key：就是在模板使用的属性，如：msg和age。
        },
        renderTriggered(event){
            console.log("renderTriggered.event.key",event.key);
        },
        updated(){
            console.log("updated");
        },
        methods:{
            changeMsg(){
                console.log("changeMsg");
                this.msg+=1
            },
            changeAge(){
                console.log("changeAge");
                this.age+=1
            },
        }
    });

    app.mount("#app");

  
    



</script>